<template>
	<view>
		<userinfo v-if="user_options.toLogin" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo" ></userinfo>
		<view class="container">
			<view v-if="!no_data">
				<view class="report-card" @tap="goUrl" :data-id="item.id" v-for="(item,index) in listdata" :key="index">
					<view class="title">
						{{item.content}}
					</view>
					<view class="text-box">
						<view class="time">
							{{item.time}}
						</view>
						<view class="accept" v-if="item && item.status == '0' ">
							{{item.statusDesc}}
						</view>
						<view class="accept active" v-if="item && item.status == '1' ">
							{{item.statusDesc}}
						</view>
						<view class="accept active1" v-if="item && item.status == '2' ">
							{{item.statusDesc}}
						</view>
						<view class="accept active2" v-if="item && item.status == '3' ">
							{{item.statusDesc}}
						</view>
						<view class="accept active3" v-if="item && item.status == '4' ">
							{{item.statusDesc}}
						</view>
					</view>
				</view>
			</view>
			<view class="report" @click="goreport">
				<image src="../../../static/images/waterReport.png" class="publish-img"></image>
			</view>
		</view>
		<view class="tip_box_no_data" v-if="no_data">
			<image class="no_data_img" src="../../../static/images/no_data.png"></image>
			<view class='no_tip_content'>还没有内容哦</view>
		</view>
	</view>

</template>

<script>
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	const getwaterReportlist = (type) => {
		common.post('HouseApi&a=village_my_utilitieslists_new', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
			type: type,
		}, data => {
			if (data.repair_list && data.repair_list.length > 0) {
				console.log("nnnnnnn", data)
				_this.listdata = data.repair_list;
			} else {
				_this.no_data = true
			}
		});
	}
	export default {
		data() {
			return {
				listdata: [],
				isActive: false,
				village_id: 0,
				pigcms_id: 0,
				type: 0,
				no_data: false,
				user_options:{}
			}
		},
		onLoad(options) {
			_this = this;
			_this.type = options.type;
			_this.title = decodeURIComponent(options.title);
			uni.setNavigationBarTitle({
				title: _this.title
			});
			
			const res = uni.getStorageSync('village_key');
			if (res) {
				_this.village_id = res.village_id;
				_this.pigcms_id = res.pigcms_id;
				_this.village_name = res.village_name;
			};
			
			common.setMainColor(_this, function(config) {
				
			});
		},
		onShow() {
			if (app.globalData.is_login){
				if (!_this.pigcms_id || _this.pigcms_id == 0) {
					if (common.checkIsFooterPage("/pages/village_menu/my")) {
						wx.switchTab({
							url: "/pages/village_menu/my"
						});
					} else {
						wx.redirectTo({
							url: '/pages/village_menu/my',
						})
					}
					return false;
				}
				getwaterReportlist(_this.type);
			}else{
				_this.user_options = {
					toLogin: true
				};
			}
		},
		methods: {
			getUserInfo(e) {
				console.log('user.info', e.userInfo);
				_this.user_options = {}
			},
			goreport() {
				console.log("type++++++++++", _this.type)
				uni.navigateTo({
					url: '/pages/village/my/waterReport?type=' + _this.type + '&title=' + encodeURIComponent(_this.title) + '&from=list'
				})
			},
			goUrl(e) {
				var id = e.currentTarget.dataset.id
				uni.navigateTo({
					url: '/pages/village/my/waterReportdetailds?id=' + id
				})
			}
		},
		components: {

		},
	}
</script>

<style>
	page {
		background-color: rgb(245, 245, 245);
	}

	.container {
		margin: 0;
		padding: 0;
	}

	.report-card {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 15rpx 15rpx 15rpx 30rpx;
		margin: 20rpx 25rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 17rpx 1rpx rgba(216, 216, 216, 0.68);
		border-radius: 20rpx;
		overflow: hidden;
	}

	.text-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.title {
		font-size: 32rpx;
		color: #000000;
		line-height: 70rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-right: 30rpx;
	}

	.time {
		font-size: 24rpx;
		color: #CCCCCC;
		line-height: 70rpx;
	}

	.accept {
		font-size: 24rpx;
		color: #FFFFFF;
		background-color: #ff0000;
		line-height: 40rpx;
		border-radius: 23rpx;
		flex-shrink: 0;
		margin-right: 30rpx;
		padding: 0 15rpx;
	}

	.active {
		background-color: #3adb99;
	}
	.active1 {
		background-color: #7ca6f7;
	}
	.active2 {
		background-color: #2681f3;
	}
	.active3 {
		background-color: #ffa801;
	}
	.report {
		position: fixed;
		bottom: 165rpx;
		right: 24rpx;
		width: 102rpx;
		height: 102rpx;
		z-index: 99;
	}

	.publish-img {
		width: 100%;
		height: 100%;
	}
	.bgbox {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.no_data_tip {
	}

	.tip_box_no_data {
		padding-top: calc((100vh - 80rpx - 288rpx - 21rpx)/2);
		font-size: 28rpx;
		text-align: center;
	}
	.tip_box_no_data .tip_title {
		width: 100%;
		text-align: center;
	}
	.no_data_img{
		width:374rpx;
		height:288rpx;
	}
</style>
